<script lang="ts" setup>
import { getCurrentInstance, onMounted, reactive, ref } from 'vue'
import { tnNavPage } from '@tuniao/tnui-vue3-uniapp/utils'
import type { NavbarRectInfo } from '@tuniao/tnui-vue3-uniapp/components/navbar'
import PageContainer from '@/components/page-container/index.vue'
import { useScrollTransparentNavbar } from '@/hooks'
import topic from '@/api/topic.js'
import { FILE_URL, SYSTEM_CONFIG } from '@/api/config'

// 导航栏的高度
const navbarHeight = ref(0)
const instance = getCurrentInstance()
const { navbarOpacity } = useScrollTransparentNavbar(instance)
onMounted(() => {
  console.log('onMounted')
  state.systemConfig = uni.getStorageSync(SYSTEM_CONFIG)
  getTopicLists()
})
// eslint-disable-next-line camelcase
const navTopicDetailPage = (topic_name: string) => {
  tnNavPage(
    // eslint-disable-next-line camelcase
    `/circlesPages/topic/detail?topicName=${topic_name}`
  )
}
const getTopicLists = () => {
  topic
    .topicLists({
      page: 1,
      page_size: 60,
      recommend: '0',
      weigh: 'hot',
    })
    .then((res) => {
      if (res.code == 1) {
        state.topicLists = res.data
      }
    })
    .catch((err) => {
      console.log(err, 'getTopicLists')
    })
}

// 导航栏初始化完毕
const navbarInitFinishHandle = (info: NavbarRectInfo) => {
  navbarHeight.value = info.height
}

const state = reactive({
  systemConfig: {
    circles: {
      topic_list_bg: '',
    },
  },
  topicLists: [],
})
</script>

<template>
  <PageContainer :placeholder-bottom="true">
    <TnNavbar
      fixed
      :placeholder="false"
      :bottom-shadow="false"
      :bg-color="`rgba(255, 255, 255, ${navbarOpacity})`"
      @init-finish="navbarInitFinishHandle"
    />
    <!-- 顶部背景 -->
    <view
      class="top-bg"
      :style="
        'background: url(' +
        FILE_URL +
        state.systemConfig.circles.topic_list_bg +
        '); background-repeat: no-repeat;background-size: cover;background-position: center center;'
      "
    />
    <!-- 页面内容 -->
    <view class="ecology-wrapper">
      <!-- 话题列表 -->
      <view class="topic">
        <view class="topic-list">
          <view
            v-for="(item, index) in state.topicLists"
            :key="index"
            class="list-item tn-shadow"
          >
            <view class="top">
              <view class="list-info" @click="navTopicDetailPage(item.name)">
                <view class="icon">
                  <TnIcon name="topics-fill" />
                </view>
                <view class="title">{{ item.name }}</view>
              </view>
            </view>
            <view class="item-desc">
              <TnIcon name="hotspot" /> {{ item.dynamic_total }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </PageContainer>
</template>

<style lang="scss" scoped>
@use '../styles/topic/lists.scss';
</style>
